<template>
    <div class="w_h_100">
        <div class="forms">
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    保后检查记录
                </div>
            </div>
            <div class="his">
                <el-table :data="inspect" style="width: 100%">
                    <el-table-column type="index" label="序号" width="100" fixed="left" align="center">
                        <template #default="{ $index }">
                            {{ $index + 1 }}
                        </template>
                    </el-table-column>

                    <el-table-column label="期数" prop="atPeriod">
                        <template #default="{ row }">
                            第{{ row.atPeriod }}期
                        </template>
                    </el-table-column>
                    <el-table-column label="检查人" prop="checker">
                        <template #default="{ row }">
                            <div v-if="row.detail"><span v-if="row.detail.personalInspect">{{
                                row.detail.personalInspect.checker }}</span></div>
                            <div v-if="row.detail"><span v-if="row.detail.companyInspect">{{
                                row.detail.companyInspect.checker }}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="检查地点" prop="checkPlace">
                        <template #default="{ row }">
                            <div v-if="row.detail"><span v-if="row.detail.personalInspect">{{
                                row.detail.personalInspect.checkPlace }}</span></div>
                            <div v-if="row.detail"><span v-if="row.detail.companyInspect">{{
                                row.detail.companyInspect.checkPlace }}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="检查方式" prop="checkStyle">
                        <template #default="{ row }">
                            <div v-if="row.detail"><span v-if="row.detail.personalInspect">{{
                                row.detail.personalInspect.checkStyle == 0 ? '现场' : '非现场' }}</span></div>
                            <div v-if="row.detail"><span v-if="row.detail.companyInspect">{{
                                row.detail.companyInspect.checkStyle == 0 ? '现场' : '非现场' }}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="检查时间" prop="checkDate1">
                        <template #default="{ row }">
                            <div v-if="row.detail"><span v-if="row.detail.personalInspect">{{
                                row.detail.personalInspect.checkDate }}</span></div>
                            <div v-if="row.detail"><span v-if="row.detail.companyInspect">{{
                                row.detail.companyInspect.checkDate }}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否预警" prop="isWarn">
                        <template #default="{ row }">
                            <div v-if="row.detail"><span v-if="row.detail.personalInspect">{{
                                row.detail.personalInspect.isWarn == 1 ? '是' : '否' }}</span></div>
                            <div v-if="row.detail"><span v-if="row.detail.companyInspect">{{
                                row.detail.companyInspect.isWarn == 1 ? '是' : '否' }}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column type="expand" width="100">
                        <template #default="{ row, $index }">
                            <div v-if="row.checkStatus != 1">
                                <div class="w_100 headTips d_f j_c_s_b m_l_20">
                                    <div class="d_f a_i_c">
                                        <div class="line"></div>
                                        保后检查详情
                                    </div>
                                    <span class="edit" @click="openDetail(row)">查看详情</span>

                                </div>
                                <div class="w_100 headTips d_f j_c_s_b m_l_20 m_t_10">
                                    <div class="d_f a_i_c">
                                        <div class="line"></div>
                                        保后检查资料上传
                                    </div>
                                    <!-- <span class="edit" @click="openShow(row, $index)">查看详情</span> -->

                                </div>
                                <div class="his1" v-if="row.afterBusinessData">
                                    <mytable :fields="fileFields" width="150" ref="tableRef"
                                        :defaultList="row.afterBusinessData" class="m_t_16" :isSelection="false"
                                        :isPaginationShow="false">
                                        <template v-slot:operation="{ row, $index }">
                                            <div class="d_f j_c_s_b">
                                                <span class="success" @click="preview(row)">预览</span>
                                            </div>
                                        </template>
                                    </mytable>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    保后审批流程
                </div>
            </div>
            <mytable :fields="beforeFields" width="110" :isHight="false" :isPaginationShow="false"
                :defaultList="afterInfo" ref="tableRef" class="m_t_10" :isSelection="false">
                <template v-slot:timeLimit="{ row }">
                    <span>{{ row.timeLimit || '0' }}天</span>
                </template>
                <template v-slot:approveStatus="{ row }">
                    <span>{{ row.approveStatus == 1 ? '正常' : '超时' }}</span>
                </template>
                <template v-slot:productName="{ row }">
                    <div class="d_f a_i_c">
                        <div class="isRead" v-if="row.isRead == 0"></div>
                        <div class="noRead" v-else></div>
                        {{ row.productName }}
                    </div>
                </template>
                <template v-slot:operation="{ row }">
                    <div class="d_f j_c_s_b">
                        <span class="edit" @click="detail(row)">查看</span>
                    </div>
                </template>
            </mytable>
        </div>
        <el-dialog v-model="dialogVisible" title="保后检查计划表" width="880px" :before-close="handleClose">
            <div class="formBox" v-if="customerType == '1'">
                <div class="formArrow d_f a_i_c">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>自然人</span>
                </div>
                <div class="w_100 d_f j_c_c f_w_w ">
                    <div class="wid">
                        <div class="label">检查期数：</div>
                        <div class="m_l_10 value">第{{ row.period }}期</div>
                    </div>
                    <div class="wid">
                        <div class="label">检查时间：</div>
                        <div class="m_l_10 value">{{ row.checkDate || '-' }}</div>
                    </div>
                    <div class="wid  ">
                        <div class="label">检查地点：</div>
                        <div class="m_l_10 value">{{ row.checkPlace || '-' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">检查人：</div>
                        <div class="m_l_10 value">{{ row.checker || '-' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">检查方式：</div>
                        <div class="m_l_10 value">{{ row.checkStyle == 0 ? '现场' : '非现场' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">是否预警：</div>
                        <div class="m_l_10 value">{{ row.isWarn == 1 ? '是' : '否' }}</div>
                    </div>
                </div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>检查事项</span>
                </div>
                <div class="w_100 d_f j_c_c f_w_w ">
                    <div class="wid">
                        <div class="label">5级分类状态：</div>
                        <div class="m_l_10 value">{{
                            row.guaCategory == 0 ? '正常' : row.guaCategory == 1 ? '关注' : row.guaCategory == 2 ? '次级' :
                                row.guaCategory == 3 ? '可疑' : row.guaCategory == 4 ? '损失类' : '-'
                        }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">借款主要用途：</div>
                        <div class="m_l_10 value">{{ row.purpose || '-' }}</div>
                    </div>
                    <div class="wid1  ">
                        <div class="label">家庭情况：</div>
                        <div class="m_l_10 value val">{{ row.homeInfo || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">经营情况：</div>
                        <div class="m_l_10 value val">{{ row.engageInfo || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">多头贷情况：</div>
                        <div class="m_l_10 value val">{{ row.longLoanInfo || '-' }}</div>
                    </div>
                </div>

            </div>
            <div class="formBox" v-else>
                <div class="formArrow d_f a_i_c">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>法人</span>
                </div>
                <div class="w_100 d_f j_c_c f_w_w ">
                    <div class="wid">
                        <div class="label">检查期数：</div>
                        <div class="m_l_10 value">第{{ companyRow.period }}期</div>
                    </div>
                    <div class="wid">
                        <div class="label">检查时间：</div>
                        <div class="m_l_10 value">{{ companyRow.checkDate || '-' }}</div>
                    </div>
                    <div class="wid  ">
                        <div class="label">检查地点：</div>
                        <div class="m_l_10 value">{{ companyRow.checkPlace || '-' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">检查人：</div>
                        <div class="m_l_10 value">{{ companyRow.checker || '-' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">担保起始日期：</div>
                        <div class="m_l_10 value">{{ companyRow.checkStart || '-' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">担保金额：</div>
                        <div class="m_l_10 value">{{ companyRow.guaMoney || '-' }}元</div>
                    </div>
                    <!-- <div class="wid">
                        <div class="label">当前担保余额：</div>
                        <div class="m_l_10 value">{{ companyRow.curGuaBalance || '-' }}元</div>
                    </div> -->
                    <div class="wid">
                        <div class="label">是否预警：</div>
                        <div class="m_l_10 value">{{ companyRow.isWarn == 1 ? '是' : '否' }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">五级分类状态：</div>
                        <div class="m_l_10 value">{{
                            companyRow.guaCategory == 0 ? '正常' : companyRow.guaCategory == 1 ? '关注' :
                                companyRow.guaCategory ==
                                    2 ? '次级' : companyRow.guaCategory == 3 ? '可疑' : companyRow.guaCategory == 4 ? '损失类' : '-'
                        }}</div>
                    </div>
                    <div class="wid">
                        <div class="label">配合检查人员：</div>
                        <div class="m_l_10 value">{{ companyRow.coordinateChecker || '-' }}</div>
                    </div>
                    <div class="wid"></div>
                </div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>检查事项</span>
                </div>
                <div class="w_100 d_f j_c_c f_w_w ">
                    <div class="wid1">
                        <div class="label">担保资金使用最新情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.moneyLastedUse }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">合同内局限性条款执行情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.contractTermsExec || '-' }}</div>
                    </div>
                    <div class="wid1  ">
                        <div class="label">非合同监控点执行情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.nonContractExec || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">公司管理层情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.comManage || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">经营管理情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.engageInfo || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">抵质押品情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.mortgageInfo || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">财务变化情况：</div>
                        <div class="m_l_10 value val">{{ companyRow.financeChange || '-' }}</div>
                    </div>
                    <div class="wid1">
                        <div class="label">检查人意见：</div>
                        <div class="m_l_10 value val">{{ companyRow.checkerRemark || '-' }}</div>
                    </div>
                </div>

            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleClose">
                        关 闭
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { businessDetail } from '../../api/service'
import { afterProtectionType } from './data'
import { useRoute, useRouter } from 'vue-router'
import moment from 'moment'
export default defineComponent({
    name: '',
    setup() {
        const data: afterProtectionType = reactive({
            hisFields: [
                {
                    label: '期数',
                    prop: 'productName',
                    width: '250px',
                },
                {
                    label: '检查人',
                    prop: 'customerName',
                    width: '150px',
                },
                {
                    label: '检查地点',
                    prop: 'agencyName',
                    width: '250px',
                },
                {
                    label: '检查方式',
                    prop: 'agencyArea',
                    width: '150px',
                },
                {
                    label: '检查时间',
                    prop: 'projectTime',
                    width: '200px',
                },
                {
                    label: '是否预警',
                    prop: 'guaMoney',
                    width: '150px',
                },
            ],
            beforeFields: [
                {
                    label: '任务名称',
                    prop: 'nodeName',
                    width: '250px',
                },
                {
                    label: '操作人',
                    prop: 'assigneeName',
                    width: '150px',
                },
                {
                    label: '操作时间',
                    prop: 'endTime',
                    width: '200px',
                },
                {
                    label: '流程时长',
                    prop: 'completeTime',
                    width: '200px',
                },
                {
                    label: '审批结论',
                    prop: 'approveResult',
                    width: '200px',
                },
                {
                    label: '备注',
                    prop: 'comment',
                    width: '200px',
                },
            ],
            fileFields: [
                {
                    label: '资料名称',
                    prop: 'businessDataName',
                },
                {
                    label: '上传环节',
                    prop: 'nodeName',
                },
                {
                    label: '上传人',
                    prop: 'uploadName',
                },
                {
                    label: '上传时间',
                    prop: 'uploadTime',
                },
            ],
            afterInfo: [],
            inspect: [],
            dialogVisible: false,
            companyRow: {
                period: '',
                checkDate: '',
                checkPlace: '',
                checker: '',
                checkStart: '',
                guaMoney: '',
                isWarn: 0,
                guaCategory: 0,
                coordinateChecker: '',
                moneyLastedUse: '',
                contractTermsExec: '',
                nonContractExec: '',
                comManage: '',
                engageInfo: '',
                mortgageInfo: '',
                financeChange: '',
                checkerRemark: ''
            },
            row: {
                period: '',
                checkDate: '',
                checkPlace: '',
                checker: '',
                checkStyle: 0,
                isWarn: 0,
                guaCategory: 0,
                purpose: '',
                homeInfo: '',
                engageInfo: '',
                longLoanInfo: ''
            },
            customerType: '1'
        })
        const route = useRoute()
        const router = useRouter()
        onMounted(() => {
            methods.getData()
        })
        const methods = {
            getData() {
                businessDetail({ id: route.query.projectId as string }).then((res: any) => {
                    data.inspect = res.after.inspect || []
                    data.afterInfo = res.after.afterInfo || []
                })
            },
            detail(item) {
                localStorage.setItem('item', JSON.stringify(item))

                router.push({ path: '/service/singleFinancing/form', query: { category: route.query.productCategory as string || route.query.category as string } })
            },
            preview(row: any) {
                window.open(row.fileUrl, '_blank')
            },
            handleClose() {
                data.dialogVisible = false
            },
            openDetail(row: any) {
                if (row.detail) {
                    if (row.detail.personalInspect) {
                        data.row = row.detail.personalInspect
                        data.customerType = '1'
                    } else {
                        data.customerType = '2'
                        data.companyRow = row.detail.companyInspect
                        data.companyRow.checkStart = moment(data.companyRow.checkStart).format('YYYY-MM-DD')
                    }

                    data.dialogVisible = true
                }
            }
        }
        return {
            ...toRefs(data), ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.forms {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

    padding: 1px 32px 24px 32px;
    overflow-y: auto;
}

.bottom {
    background: #fff;
    padding: 32px;
    width: calc(100% - 64px);
}

.wid {
    width: 380px;
    color: #000000;
    font-size: 14px;
    margin-top: 20px;
    display: flex;


}

.label {
    text-align: right;
    width: 190px;
}

.value {
    width: 215px;
    word-wrap: break-word;
    /* 允许在单词内换行 */
    overflow-wrap: break-word;
    /* 同上，现代浏览器推荐使用这个属性别名 */
    white-space: normal;
    /* 允许自动换行 */
}

.wid1 {
    width: 100%;
    color: #000000;
    font-size: 14px;
    margin-top: 20px;
    display: flex;
}

.val {
    width: calc(100% - 185px) !important;
}
</style>
<style lang='scss'>
.his {
    .el-table {
        width: 100% !important;
    }
}

.his1 {
    width: 100% !important;

    .el-table__body {
        width: 100% !important;
    }
}
</style>